<template>
  <div class="login">
    <div id="login_b">
      <div id="title">
        <br />
        <h2>用户登录</h2>
      </div>
      <!--  登录界面-->
      <div id="content">
        <br />
        <br />
        <div class="inputUI">
          用 户 名 :
          <input
            @blur="checkAdminAccountStyle"
            type="text"
            name="username"
            class="inp"
            id="inp_user"
            v-model="adminAccountInfo"
          />
          <span class="hint" id="hint_user" v-text="adminPasswordShow"></span>
        </div>
        <div class="inputUI">
          用户密码:
          <input
            @blur="checkAdminPasswordStyle"
            type="password"
            name="userpassword"
            class="inp"
            id="inp_pwd"
            v-model="adminPasswordInfo"
          />
          <span class="hint" id="hint_pwd" v-text="adminAccountShow"></span>
        </div>
        <div class="btnContent">
          <br />
          <br />
          <!-- <button  class="btnStyle">登录</button><br /> -->

          <el-button type="primary" @click="sendInfo" plain>登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import request from '../axios/axios.js'
import {useRouter} from 'vue-router'
import {adminStateStore} from '../store/AdminInfo.js'

let adminStoreInfo = adminStateStore()
let routers = useRouter()

//定义变量
let adminAccountInfo=ref("")
let adminPasswordInfo=ref('')

//变量展示
let adminAccountShow=ref('')
let adminPasswordShow=ref('')

//方法
//检查用户名格式
async function checkAdminAccountStyle(){
  //正则表达式
  var adminAccountReg = /^[1-9a-zA-Z]{1}[0-9a-zA-Z]{4,15}$/
  if(adminAccountReg.test(adminAccountInfo.value)){
    adminAccountShow.value="OK"
    return true
  }else{
    adminAccountShow.value="账号格式不正确"
    return false
  }

}
//检查密码格式
function checkAdminPasswordStyle(){
  var adminPasswordReg=/^[1-9a-zA-Z]{1}[0-9a-zA-Z]{4,15}$/

  if(adminPasswordReg.test(adminPasswordInfo.value)){
    adminPasswordShow.value="Ok"
    return true;
  }else{
    adminPasswordShow.value="密码格式不正确"
  }
}
//发送登录请求
async function sendInfo(){
  let {data} = await request.post("/admin/login",{
    adminAccount:adminAccountInfo.value,
    adminPassword:adminPasswordInfo.value
  })
  if(data.code==200){
    var info = data.data;
    alert(data.message);
    adminStoreInfo.setterAdminAccount(info.adminAccount);
    adminStoreInfo.setterAdminId(info.adminId);
    adminStoreInfo.setterAdminLoginState("1")
    adminStoreInfo.setterAdminName(info.adminName)
    adminStoreInfo.setterAdminPassword(info.adminPassword)

    //路由跳转
    routers.push("/page/classes")
  }else{
    alert(data.message)
  }
}


</script>

<style>
@import "../public/css/login_css.css";
.login {
  width: 100%;
  height: 100%;
  /* background-image: url(../public/img/body_bg.jpg); */
}
</style>